import React, { Component } from "react";
import { Link, withRouter } from 'react-router-dom'
import { Menu } from 'antd';
import { Icon } from '@ant-design/compatible'

import './index.less'

import menuList from "../../config/menuConfig";
import memoryUtils from "../../utils/memoryUtils"

const { SubMenu } = Menu;

// import logo from '../../assets/images/logo.png'
/**
 * 左侧导航的组件
 */
class LeftNav extends Component {
    state = {
        collapsed: false,
    };

    /**
     * 根据menu的数据数组，生成对应的标签数组
     */
    getMenuNodes_Map = (menuList) => {
        return menuList.map(item => {
            if (!item.children) {
                return (
                    <Menu.Item key={item.key}>
                        <Link to={item.key}>
                            <Icon type={item.icon} />
                            <span>{item.title}</span>
                        </Link>
                    </Menu.Item>
                )
            } else {
                return (
                    <SubMenu key={item.key} title={
                        <span>
                            <Icon type={item.icon} />
                            <span>{item.title}</span>
                        </span>
                    }>
                        {
                            this.getMenuNodes(item.children)
                        }
                    </SubMenu>
                )
            }
        })
    }
    /**
     * 使用reduce累加+ 递归实现
     */
    getMenuNodes = (menuList) => {

        // 得到当前请求的路由路径
        const path = this.props.location.pathname

        // reduce操作的是[]
        return menuList.reduce((prev, item) => {

            // 如果当前用户有item对应的权限，才需要显示对应的菜单项
            if (this.hasAuth(item)) {
                // 向prev中添加<Menu.Item>
                if (!item.children) {
                    prev.push((
                        <Menu.Item key={item.key}>
                            <Link to={item.key}>
                                <Icon type={item.icon} />
                                <span>{item.title}</span>
                            </Link>
                        </Menu.Item>
                    ))
                } else {

                    // 查找一个与当前请求的路径匹配的子Item
                    const cItem = item.children.find(cItem => path.indexOf(cItem.key) === 0)
                    if (cItem) {
                        //当前请求的路径等于children中的某个key，说明当前item的子列表需要展开
                        this.openKey = item.key
                    }

                    // 向prev中添加<SubMenu>
                    prev.push((
                        <SubMenu key={item.key} title={
                            <span>
                                <Icon type={item.icon} />
                                <span>{item.title}</span>
                            </span>
                        }>
                            {
                                this.getMenuNodes(item.children)
                            }
                        </SubMenu>
                    ))
                }
            }
            return prev;
        }, [])
    }
    /**
     * 判断当前登录对item是否有权限
     */
    hasAuth = (item) => {
        const { key, isPublic } = item;

        const menus = memoryUtils.user.role.menus;
        const username = memoryUtils.user.username;

        /**
         * 1. 如果当前用户是admin
         * 2. 当前用户有此item的权限，
         * 3. 当前item是公开的
         */
        if (username === 'admin' || isPublic || menus.indexOf(key) !== -1) {
            return true;
        } else if (item.children) {
            // 4. 如果当前用户有此item的某个子item的权限
            return !!item.children.find(child => menus.indexOf(child.key) !== -1)
        }
        return false;
    }

    //在第一次render之前执行，执行1次
    //为第一次render准备数据（必须同步）
    componentWillMount() {
        this.menuNodes = this.getMenuNodes(menuList);
    }

    render() {
        // 得到当前请求的路由路径[需要使用withRouter将当前组件包装成路由组件]
        const path = this.props.location.pathname;
        const openKey = this.openKey

        return (
            <div className="left-nav">
                <Link to="/">
                    <header className="left-nav-header">
                        {/* <img src={logo} alt="" /> */}
                        <h1>后台管理系统</h1>
                    </header>
                </Link>
                <Menu
                    selectedKeys={[path]}
                    defaultOpenKeys={[openKey]}
                    mode="inline"
                    theme="dark"
                >
                    {/*  
                    <Menu.Item key="/home" icon={<PieChartOutlined />}>
                        <Link to="/home">首页</Link>
                    </Menu.Item>
                    
                    <SubMenu icon={<MailOutlined />} title="商品">
                        <Menu.Item key="/category" icon={<MailOutlined />}>                        
                            <Link to="/category">
                                <span>分类管理</span>
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="/product" icon={<MailOutlined />}>                            
                            <Link to="/product">
                                <span>商品管理</span>
                            </Link>
                        </Menu.Item>
                    </SubMenu>
                    */}

                    {
                        this.getMenuNodes(menuList)
                    }
                </Menu>
            </div>
        )
    }
}

// withRouter高阶组件
// 包装非路由组件，返回一个新的组件
// 新的组件向非路由组件传递3个属性：history、location、match
export default withRouter(LeftNav)